import React from 'react';
import { NavMenu, Button, Input, TextBox } from '../components';


class AdminView extends React.Component {

    componentDidMount() {
        this.initData();

    }
    render() {
        const { setState, actions, adminData, match } = this.props;
        const { articles, newArticleObj } = adminData;
        console.log('newArticleObj', newArticleObj);
        console.log('match', match);
        const content = articles.find((a) => match.params.id === a._id) ? articles.find((a) => match.params.id === a._id).content : null;
        console.log('articles', content);
        console.log('articles', articles);
        return (
            <div className="body">
                <div className="body-content">
                    <div className="left-sec col-3">
                        {articles.length ? <div className="col-12"><NavMenu editBtn rmBtn data={articles} onClick={this.editOrDelete} /></div> : null}
                        {
                            newArticleObj ?
                                <div className="col-12">
                                    <Input value={newArticleObj.title} onChange={(e) => this.changeFields(e.target.value, "title")} />
                                    <Button mStyle="primary" onClick={this.savePendingArticle} >save</Button>
                                    <Button style={{ float: "right" }} onClick={this.resetPendingArticle}>cancel</Button>
                                </div>

                                :
                                <div className="col-12">
                                    <Button mStyle="primary" style={{ float: "left" }} onClick={this.AddPendingArticle}>add</Button>
                                </div>
                        }

                    </div>
                    <div className="main-sec col-9">
                        {
                            newArticleObj ?
                                <TextBox value={newArticleObj.content} onChange={(e) => this.changeFields(e.target.value, "content")} />
                                :
                                content
                        }
                    </div>
                </div>
            </div>
        )
    }
    initData = () => {
        const { actions } = this.props;
        actions.getArticle();
    }
    AddPendingArticle = () => {
        const { actions, adminData } = this.props;
        adminData["newArticleObj"] = { title: "", content: "", tag: "", link: "", aLink: "" };
        actions.setState(adminData);
    }

    savePendingArticle = () => {
        const { actions, adminData } = this.props;
        const { newArticleObj } = adminData;
        if (!newArticleObj.title) return;
        actions.savePendingArticle(newArticleObj);
    }
    resetPendingArticle = () => {
        const { actions, adminData } = this.props;
        adminData["newArticleObj"] = undefined;
        actions.setState(adminData);
    }
    changeFields = (value, field) => {
        const { actions, adminData } = this.props;
        const { newArticleObj } = adminData;
        newArticleObj[field] = value;
        adminData.newArticleObj = newArticleObj;
        actions.setState(adminData);
    }
    editOrDelete = (id, mode) => {
        const { actions, adminData } = this.props;
        let { newArticleObj, articles } = adminData;
        debugger;
        if (mode === "e") {
            console.log("articles", articles);
            console.log("id", id)
            newArticleObj = articles.find((a) => a._id === id);
            adminData.newArticleObj = newArticleObj;
            actions.setState(adminData);
        } else if (mode === "d") {
            if (confirm("Do you want to delete this article?")) {
                actions.deleteArticle(id);
            }
        }
    }
}
export default AdminView;